<template>
    <transition appear name="side_anime">
      <div id="board4">
        <h1>医职人员管理</h1>

        <!-- 条件查询 -->
        <div class="search">
          <el-form :inline="true" :model="searchForm" class="demo-form-inline">

          <el-form-item>
              <el-input v-model="searchForm.name" placeholder="姓名" clearable></el-input>
          </el-form-item>

          <el-form-item>
            <el-select v-model="searchForm.subject" placeholder="科室" clearable>
              <el-option 
              v-for="item in subjectData"
              :key="item.value"
              :label="item.label" 
              :value="item.value">
              </el-option>
              <!-- <el-option label="急诊室" value="急诊室"></el-option>
              <el-option label="内科" value="内科"></el-option>
              <el-option label="外科" value="外科"></el-option>
              <el-option label="妇产科" value="妇产科"></el-option>
              <el-option label="幼儿科" value="幼儿科"></el-option>
              <el-option label="化验科" value="化验科"></el-option>
              <el-option label="药剂科" value="药剂科"></el-option> -->

            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select v-model="searchForm.name_zh" placeholder="角色" clearable>
              <el-option label="医生" value="医生"></el-option>
              <el-option label="药剂师" value="药剂师"></el-option>
              <el-option label="前台" value="前台"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="searchStaff">查询</el-button>
          </el-form-item>
        </el-form>
        </div>

        <!-- 分割线 -->
        <el-divider></el-divider>

        <!-- 新增按钮 -->
        <div class="add">
          <el-button type="success" size="small" icon="el-icon-plus" @click="addStaffFormVisible = true">新增医职人员</el-button>
        </div>

        <!-- 新增医职人员 -->
        <el-dialog title="添加医职人员" v-model="addStaffFormVisible" width="30%">
          <el-form :model="addStaffForm" ref="addStaffForm" :rules="rules" label-width="100px" class="demo-ruleForm">
            <el-form-item label="账号" prop="username" :label-width="formLabelWidth">
              <el-input v-model="addStaffForm.username" autocomplete="off" clearable></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password" :label-width="formLabelWidth">
              <el-input v-model="addStaffForm.password" autocomplete="off" clearable></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
              <el-input v-model="addStaffForm.name" autocomplete="off" clearable></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
              <el-select v-model="addStaffForm.sex" placeholder="请选择" style="width:100%" clearable>
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
              <el-input v-model.number="addStaffForm.age" autocomplete="off" clearable></el-input>
            </el-form-item>
            <el-form-item label="电话" :label-width="formLabelWidth" prop="tel">
              <el-input v-model="addStaffForm.tel" autocomplete="off" clearable></el-input>
            </el-form-item>
            <el-form-item label="所属科室" prop="subject" :label-width="formLabelWidth">
              <el-select v-model="addStaffForm.subject" placeholder="请选择" style="width:100%" clearable>
                <el-option 
                v-for="item in subjectData"
                :key="item.value"
                :value="item.value"
                :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="角色" prop="name_zh" :label-width="formLabelWidth">
              <el-select v-model="addStaffForm.name_zh" placeholder="请选择" style="width:100%" clearable>
                <el-option label="医生" value="医生"></el-option>
                <el-option label="药剂师" value="药剂师"></el-option>
                <el-option label="前台" value="前台"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="职称" prop="profectionTitle" :label-width="formLabelWidth">
              <el-select v-model="addStaffForm.profectionTitle" placeholder="请选择" style="width:100%" clearable>
                <el-option label="主任医师" value="主任医师"></el-option>
                <el-option label="副主任医师" value="主任医师"></el-option>
                <el-option label="主治医师" value="主治医师"></el-option>
                <el-option label="住院医师" value="住院医师"></el-option>
                <el-option label="实习医生" value="实习医生"></el-option>
                <el-option label="药剂师" value="药剂师"></el-option>
                <el-option label="前台" value="前台"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="看诊室" prop="roomNo" :label-width="formLabelWidth">
              <el-input v-model="addStaffForm.roomNo" autocomplete="off" clearable></el-input>
            </el-form-item>

            <el-form-item label="住址" :label-width="formLabelWidth">
              <el-input v-model="addStaffForm.address" autocomplete="off" clearable></el-input>
            </el-form-item>
          </el-form>

          <span class="dialog-footer">
            <el-button @click="addStaffFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addStaff('addStaffForm')">确 定</el-button>
          </span>
            
        </el-dialog>

        <!-- 修改医职人员信息 -->
        <el-dialog title="修改医职人员" v-model="updateStaffFormVisible" width="30%">
          <el-form :model="updateStaffForm" ref="updateStaffForm" label-width="100px" class="demo-ruleForm" :rules="rules">
            <el-form-item label="所属科室" prop="subject" :label-width="formLabelWidth">
              <el-select v-model="updateStaffForm.subject" placeholder="请选择" style="width:100%" clearable>
                <el-option
                v-for="item in subjectData"
                :key="item.value"
                :value="item.value"
                :label="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="职称" prop="profectionTitle" :label-width="formLabelWidth">
              <el-select v-model="updateStaffForm.profectionTitle" placeholder="请选择" style="width:100%" clearable>
                <el-option label="主任医师" value="主任医师"></el-option>
                <el-option label="副主任医师" value="主任医师"></el-option>
                <el-option label="主治医师" value="主治医师"></el-option>
                <el-option label="住院医师" value="住院医师"></el-option>
                <el-option label="实习医生" value="实习医生"></el-option>
                <el-option label="药剂师" value="药剂师"></el-option>
                <el-option label="前台" value="前台"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="看诊室" prop="roomNo" :label-width="formLabelWidth">
              <el-input v-model="updateStaffForm.roomNo" autocomplete="off" clearable></el-input>
            </el-form-item>
          </el-form>

          <span class="dialog-footer">
              <el-button @click="updateStaffFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="updateStaff('updateStaffForm')">确 定</el-button>
          </span>
            
        </el-dialog>

        <!-- 医院职工列表 -->
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <!-- <el-table-column
            type="selection"
            width="55">
          </el-table-column> -->

          <el-table-column
            prop="name"
            label="姓名"
            width="80">
          </el-table-column>

          <el-table-column
            prop="sex"
            label="性别"
            width="80">
          </el-table-column>

          <el-table-column
            prop="age"
            label="年龄"
            width="80">
          </el-table-column>

          <el-table-column
            prop="tel"
            label="电话"
            width="120">
          </el-table-column>

          <!-- <el-table-column
            prop="name_zh"
            label="角色"
            width="80">
          </el-table-column> -->

          <el-table-column
            prop="subject"
            label="所属科室"
            width="80">
          </el-table-column>

          <el-table-column
            prop="profectionTitle"
            label="职称"
            width="80">
          </el-table-column>

          <el-table-column
            prop="roomNo"
            label="看诊室"
            width="80">
          </el-table-column>

          <el-table-column
            prop="address"
            label="住址"
            width="120">
          </el-table-column>

          <el-table-column
            prop="deleted"
            label="状态"
            width="100">
            <template #default="scope">
                <span v-if="scope.row.deleted== 1">
                    <el-tag type="success">已启用</el-tag>
                </span>
                <span v-if="scope.row.deleted== 0">
                    <el-tag type="danger">未启用</el-tag>
                </span>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                :disabled="scope.row.deleted == 0"
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="handleUpdate(scope.$index, scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-switch-button"
                v-show="scope.row.deleted == 1"
                @click="handleStatus(scope.$index, scope.row)">停用</el-button>
              <el-button
                size="mini"
                type="success"
                icon="el-icon-switch-button"
                v-show="scope.row.deleted == 0"
                @click="handleStatus(scope.$index, scope.row)">启用</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- <div style="margin-top: 20px" class="select">
          <el-button @click="toggleSelection()">取消选择</el-button>
        </div> -->

        <!-- 分页 -->
        <el-pagination
            class="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            v-model:currentPage="currentPage"
            v-model:pageSize="pageSize"
            :page-size="8"
            layout="total, prev, pager, next"
            :total=total>
        </el-pagination>
      </div>
    </transition>
</template>

<script>
import {getAllDepartment, queryMedicalStaff} from '../../api/api'
import {addMedicalStaff} from '../../api/api'
import {accountStatus} from '../../api/api'
import {updateMedicalStaff} from '../../api/api'
export default {
    inject:['reload'],
    data() {
      var checkAge = (rule, value, callback) => {
        if (rule.required && !value) {
            return callback(new Error('年龄不能为空'))
          }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'))
          } else {
            if (value <= 0) {
              callback(new Error('年龄必须大于0'))
            } else {
              callback()
            }
          }
        }, 1000)
      }
      // 设置手机号码的验证规则
      const phone = (rule, value, callback) => {
          const reg = /^1[3|4|5|6|7|8][0-9]\d{8}$/
          // if (rule.required && !value) {
          //     return callback(new Error('不能为空'))
          // }
          if (value) {
              if (!(reg.test(value))) {
                  callback(new Error('请输入正确的手机号码'))
              } else {
                  callback()
              }
          }else {
            callback();
          }
      }
      return {
        searchForm: {
          name: '',
          subject: '',
          name_zh: ''
        },
        updateStaffForm: {
          subject: '',
          profectionTitle: '',
          roomNo: ''
        },
        tableData: [],
        multipleSelection: [],
        currentPage:1,
        total:0,
        pageSize:8,
        addStaffForm:{},
        updateStaffForm: {
          subject: '',
          profectionTitle: '',
          roomNo: ''
        },
        addStaffFormVisible: false,
        updateStaffFormVisible:false,
        subjectData:[],
        value:'',
        // addStaffForm:{
        //   username:'',
        //   password:''
        // }
        rules:{
          username:{ required:true, message:'不能为空', trigger: 'blur'},
          password:{ required:true, message:'不能为空', trigger: 'blur'},
          name:{ required:true, message:'不能为空', trigger: 'blur'},
          subject:{ required:true, message:'不能为空', trigger: 'blur'},
          profectionTitle:{ required:true, message:'不能为空', trigger: 'blur'},
          name_zh:{ required:true, message:'不能为空', trigger: 'blur'},
          roomNo:{ required:true, message:'不能为空', trigger: 'blur'},
          age:{ required:true, validator:checkAge, trigger: 'blur'},
          tel:{ required:false, validator:phone, trigger: 'blur'}
        }
      }
    },

    mounted() {
      this.getMedicalStaffList(1); 
      this.getSubjectData();
    },

    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },

      //当每页数据条数发生改变的时候触发
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`)
        this.currentPage = 1;
        this.pageSize = val;
        this.getMedicalStaffList();
      },
      //当页码发生改变的时候触发
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`)
        this.currentPage = val;
        this.getMedicalStaffList(val);
      },

      //获取医院职工列表
      getMedicalStaffList(page) {
        let token = this.$store.state.medicalStaff.loginData.tokenValue
        console.log(token)
        let data = {
          'page':page,
          'size':8,
          name:this.searchForm.name,
          subject:this.searchForm.subject,
          name_zh:this.searchForm.name_zh
        }
        let header = {
          'satoken':token
        }
        queryMedicalStaff(data,header).then(response => {
          console.log('请求成功',response)
          if (response.ret == '0'){
            this.tableData = response.ipage.records
            this.total = response.ipage.total
          }else {
            this.$message({
              message:'获取数据失败',
              type: 'error',
              showClose:true
          })
          }
        })
      },

      //条件查询
      searchStaff() {
        let token = this.$store.state.medicalStaff.loginData.tokenValue
        console.log(token)
        let data = {
          'page':this.currentPage,
          'size':8,
          name:this.searchForm.name,
          subject:this.searchForm.subject,
          name_zh:this.searchForm.name_zh
        }
        let header = {
          'satoken':token
        }
        console.log(data)
        queryMedicalStaff(data,header).then(response => {
          console.log('请求成功',response)
          if (response.ret == '0'){
            this.tableData = response.ipage.records
            this.total = response.ipage.total
          }else {
            this.$message({
              message:'查询失败',
              type: 'error',
              showClose:true
          })
          }
        })
      },

      //添加医职人员
      addStaff(formName) {
        let token = this.$store.state.medicalStaff.loginData.tokenValue
        let header = {
        'satoken':token
        }
        let data = {
          "username":this.addStaffForm.username,
          "password":this.addStaffForm.password,
          "name":this.addStaffForm.name,
          "sex":this.addStaffForm.sex,
          "age":this.addStaffForm.age,
          "tel":this.addStaffForm.tel,
          "subject":this.addStaffForm.subject,
          "name_zh":this.addStaffForm.name_zh,
          "profectionTitle":this.addStaffForm.profectionTitle,
          "roomNo":this.addStaffForm.roomNo,
          "address":this.addStaffForm.address
        }
        // console.log(data)
         this.$refs[formName].validate((valid) => {  //开启校验
          if (valid) {   // 如果校验通过，请求接口，允许提交表单
            addMedicalStaff(data,header).then(response => {
              console.log('请求成功',response)
              if (response.ret == '0'){
                // this.$router.push('/homeview/staffList')
                this.total++
                this.addStaffFormVisible=false
                this.$message({
                  message:'添加成功',
                  type: 'success',
                  showClose:true
                })
                this.reload()
              }else {
                this.$message({
                  message:'添加失败',
                  type: 'error',
                  showClose:true
                })
              }
            })
          } else {   //校验不通过
            return false;
          }
        });
        
      },

      //请求所有科室数据展示在下拉框
      getSubjectData() {
        let token = this.$store.state.medicalStaff.loginData.tokenValue
            let header = {
            'satoken':token
            }
            getAllDepartment(header).then(response => {
              console.log('请求成功',response)
              if (response.ret == '0'){
                  response.data.forEach(item => {
                    this.subjectData.push({
                      value:item.name,
                      label:item.name
                    })
                  })
                  console.log(this.subjectData)
              }else {
                  this.$message({
                  message:'获取科室失败',
                  type: 'error',
                  showClose:true
              })
              }
            })
      },

      //修改医职人员信息
      handleUpdate(index,row) {
        this.updateStaffFormVisible = true,
        this.id = row.id,
        this.updateStaffForm.subject = row.subject,
        this.updateStaffForm.profectionTitle = row.profectionTitle,
        this.updateStaffForm.roomNo = row.roomNo
      },
      updateStaff(formName) {
        let data = {
          id:this.id,
          subject:this.updateStaffForm.subject,
          profectionTitle:this.updateStaffForm.profectionTitle,
          roomNo:this.updateStaffForm.roomNo
        }
        let token = this.$store.state.medicalStaff.loginData.tokenValue
        let header = {
        'satoken':token
        }
        this.$refs[formName].validate((valid) => {  //开启校验
          if (valid) {   // 如果校验通过，请求接口，允许提交表单
            updateMedicalStaff(data,header).then(response => {
            console.log('请求成功',response)
            if (response.ret == '0'){
              // this.$router.push('/homeview/staffList')
              this.updateStaffFormVisible=false
              this.$message({
                message:'修改信息成功',
                type: 'success',
                showClose:true
              })
              this.reload()
            }else {
              this.$message({
                message:'修改信息失败',
                type: 'error',
                showClose:true
              })
            }
          })
          } else {   //校验不通过
            return false;
          }
        });

      },

      //启用、停用医护人员
      handleStatus(index,row) {
        let token = this.$store.state.medicalStaff.loginData.tokenValue
        let data = {
          id:row.id,
          deleted:row.deleted
        }
        let header = {
          'satoken':token
        }
        console.log(row.deleted)
        if(row.deleted === 0){
            accountStatus({
              id:row.id,
              deleted: 1
            },header).then(response => {
            console.log('请求成功',response)
            if (response.ret == '0'){
              //this.$router.push('/homeview/staffList')
              row.deleted = 1
              this.$message({
                message:'账户启用成功',
                type: 'success',
                showClose:true
              })
              // this.reload()
            }else {
              this.$message({
                message:'账户启用失败',
                type: 'error',
                showClose:true
            })
            }
          })
        }else{
          accountStatus({
            id:row.id,
            deleted:0
          },header).then(response => {
            console.log('请求成功',response)
            if (response.ret == '0'){
              row.deleted = 0
              this.$message({
                message:'账户停用成功',
                type: 'success',
                showClose:true
              })
              // this.reload()
            }else {
              this.$message({
                message:'账户停用失败',
                type: 'error',
                showClose:true
            })
            }
          })
        }
      }
      
    }
  }
</script>


<style scoped>
.side_anime-enter-from,.side_anime-leave-to{
  opacity: 1;
}

.side_anime-enter-active{
  animation: slideInLeft 1s;
}

.side_anime-leave-active{
  animation: slideOutLeft 1s;
}

#board4 .add {
  text-align: left;
  margin: 20px 0 10px 0;
}

#board4 .search {
  text-align: left;
  margin-top: 20px;
}
#board4 .pagination {
  margin-top: 30px;
}
</style>

